<div *ngIf="login_user.type==1" >
    <table class="table table-hover">
        <caption>User List</caption>
        <thead>
            <tr>
                <!-- <th>
                    <input type="checkbox" name="check_all" />
                </th> -->
                <!-- <th>ID</th> -->
                <th>Username</th>
                <th>Password</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users">
    
                <!-- <td>
                    <input type="checkbox" name="users" />
                </td> -->
                <!-- <td> {{user.id}} </td> -->
                <td> {{user.username}} </td>
                <td> {{user.password}} </td>
    
                <td>
                    <button (click)="deleteUser(user)">Delete</button>
                    <button (click)="type='EDIT';new_user=user;old_user=user.username" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >Edit</button>
                </td>
            </tr>
    
        </tbody>
    </table>
    
    
    
    
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" (click)="type='ADD'">ADD</button>
    
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                       {{type}} USER
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">USERNAME</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" placeholder="USERNAME" [(ngModel)]="new_user.username" name="username" value="{{new_user.username}}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">PASSWORD</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="password" placeholder="PASSWORD" [(ngModel)]="new_user.password" name="password" value="{{new_user.password}}">
                            </div>
                        </div>
                        
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="closeModalButton"  class="btn btn-default" data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-primary" (click)="editUser(new_user,type,old_user)">
                        SAVE
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

